<template>
  <div class="mine">
    <NavBar></NavBar>
    <div class="my">
      <section>
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="iphone">
          <p class="nickName">123456789</p>
          <p class="phone">{{ apple | formatPhone }}</p>
        </div>
        <van-button round type="info">账户设置</van-button>
      </section>
      <nav>
        <p>
          <span style="fontsize: 18px; font-weight: 700">吃货卡</span
          >&nbsp;&nbsp;<span
            >| &nbsp;&nbsp; 吃货豆:
            <span style="fontsize: 18px; font-weight: 700">1461</span>
          </span>
        </p>
        <p style="fontsize: 12px; margin: 10px 0px">
          升级超级吃货卡,每月得无门槛红包,下单5倍返吃货豆
        </p>
      </nav>
      <div class="banner">
        <div style="padding: 10px 0px">
          <van-icon name="card" color="red" /><span
            style="fontsize: 18px; fontweight: 700"
            >红包</span
          >
          <p style="fontsize: 12px; margin-top: 15px">7张今天到期</p>
        </div>
        <div style="padding: 10px 0px">
          <van-icon name="gold-coin" color="red" /><span
            style="fontsize: 18px; fontweight: 700"
            >余额</span
          >
          <p style="fontsize: 12px; text-align: center; margin-top: 15px">
            0元
          </p>
        </div>
      </div>
      <main>
        <h4 style="margin: 10px">常用工具</h4>
        <van-grid>
          <van-grid-item icon="location-o" text="我的地址" />
          <van-grid-item icon="service-o" text="我的客服" />
          <van-grid-item icon="like-o" text="店铺关注" />
          <van-grid-item icon="star-o" text="评价有礼" />
        </van-grid>
      </main>
      <div class="bottom">
        <div
          style="
            padding: 10px;
            height: 200px;
            width: 43%;
            marginbottom: 10px;
            border-radius: 10px;
            background-color: #fff;
          "
        >
          <span style="fontsize: 18px; fontweight: 700">邀好友赚现金</span>
          <p style="fontsize: 12px; margin-top: 7px">最高得15元</p>
          <div style="margintop: 10px">
            <img src="../assets/img/my01.gif" width="100%" />
          </div>
          <div class="btnDiv">
            <van-button round type="info">去邀请</van-button>
          </div>
        </div>
        <div
          style="
            padding: 10px;
            height: 200px;
            width: 43%;
            marginbottom: 10px;
            border-radius: 10px;
            background-color: #fff;
          "
        >
          <span style="fontsize: 18px; fontweight: 700">饿了么服务号</span>
          <p style="fontsize: 12px; margintop: 7px">关注后及时接收系统通知</p>
          <div style="margintop: 10px">
            <img src="../assets/img/my02.gif" width="100%" />
          </div>
          <van-button round type="info">立即关注</van-button>
        </div>
        <div
          style="
            padding: 10px;
            height: 200px;
            width: 43%;
            border-radius: 10px;
            background-color: #fff;
          "
        >
          <span style="fontsize: 18px; fontweight: 700">邀好友赚现金</span>
          <p style="fontsize: 12px; margin-top: 7px">最高得15元</p>
          <div style="margintop: 10px">
            <img src="../assets/img/my01.gif" width="100%" />
          </div>
          <div class="btnDiv">
            <van-button round type="info">查佣金</van-button>
          </div>
        </div>
        <div
          style="
            padding: 10px;
            height: 200px;
            width: 43%;
            border-radius: 10px;
            background-color: #fff;
          "
        >
          <span style="fontsize: 18px; fontweight: 700">饿了么服务号</span>
          <p style="fontsize: 12px; margintop: 7px">关注后及时接收系统通知</p>
          <div style="margintop: 10px">
            <img src="../assets/img/my02.gif" width="100%" />
          </div>
          <van-button round type="info">立即关注</van-button>
        </div>
      </div>
      <!-- <TabbarVue></TabbarVue> -->
      <FooterVue></FooterVue>
    </div>
  </div>
</template>

<script>
// import TabbarVue from "@/components/Tabbar.vue";
import FooterVue from "@/components/Footer.vue";
import NavBar from "@/components/NavBar1.vue";
export default {
  name: "My",

  data() {
    return {
      apple: "12345678912",
    };
  },
  components: { FooterVue, NavBar },
  filters: {
    formatPhone(p) {
      return p.slice(0, 3) + "****" + p.slice(-4);
    },
  },
};
</script>

<style scoped>
.mine{
  display: flex;
  flex-direction: column;
}
.my {
  padding: 10px;
  background-color: #f5f5f5;
  flex: 1;
  overflow: auto;
}
.van-image {
  margin: 10px;
}
section .van-button {
  background-color: #fff;
  color: black;
  border: 1px solid gray;
  width: 100px;
  height: 30px;
  font-size: 16px;
  align-self: center;
}
section {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
}
.iphone .nickName {
  margin: 20px 10px;
  font-weight: 700;
  font-size: 20px;
}
.iphone .phone {
  font-size: 14px;
  margin: 0px 10px;
}
nav {
  background-color: #4da6f1;
  border-radius: 10px;
  color: #fff;
  height: 80px;
  box-sizing: border-box;
  padding: 15px 20px;
}
.banner {
  margin-top: 5px;
  background-color: #fff;
  border-radius: 10px;
  height: 80px;
  display: flex;
  justify-content: space-around;
}
main {
  margin-top: 5px;
  background-color: #fff;
  border-radius: 10px;
  height: 120px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  flex: 1;
  overflow: auto;
  margin-top: 10px;
  flex-wrap: wrap;
}
.bottom .van-button {
  background-color: #fff;
  color: black;
  border: 1px solid gray;
  width: 80px;
  height: 30px;
  font-size: 12px;
  margin-left: 30px;
}
</style>